<template>
  <div>
    <div class="video" :class="{videosmall:windowMode === 'min'}" id="shareScreenVideo" v-show="windowMode !== 'min'">
      <div id="dragbar" class="dragbar" v-show="dragbarShow"></div>
      <div class="headerimg"  v-show="dragbarShow">
        <div class="minimg" v-if="windowMode !== 'min'" @click="smallMode"><i class="iconfont icon-zuixiaohua" style="color: #737373;"></i></div>
        <div class="minimg" v-if="windowMode === 'max'" @click="bigMode"><i class="iconfont icon-zhankai" style="color: #737373;"></i></div>
        <div class="minimg" v-if="windowMode === 'big'" @click="maxMode" ><i class="iconfont icon-zuidahua" style="color: #737373;"></i></div>
        <div class="minimg" v-if="windowMode !== 'min'" @click="closeVideo"><i class="iconfont icon-guanbi" style="color: red;"></i></div>
      </div>
      <iframe v-if="screenShareUrl !== ''" :src="url" frameborder="0" width="100%" height="100%" allow="microphone; camera"></iframe>
    </div>
    <div class="minvideo" id="minvideo" v-show="windowMode === 'min'" @click="bigMode">
      <div class="close">
        <i class="iconfont icon-guanbi" @click="closeVideo"></i>
      </div>
      <i class="iconfont icon-zhuomianfenxiang" style="font-size: 34px;color: #fff;vertical-align: middle"></i>
    </div>
  </div>
</template>
<script>
  import * as types from '@/store/modules/webchat/mutation-types.js'
  import { screenShareRecordPath } from '@/utils/webchat'

  let tWidth, tHeight
  window.onresize = function () {
    tWidth = document.body.clientWidth
    tHeight = document.body.clientHeight
  }
  export default ({
    data () {
      return {
        swit: true,
        windowMode: 'big',
        dragbarShow: true,
        params: {
          left: 0,
          top: 0,
          currentX: 0,
          currentY: 0,
          flag: false
        },
        dragWidth: 0,
        dragHeight: 0,
        videoRecord: false,
        screenShareUrl: ''
      }
    },
    computed: {
      url () {
        let record = this.videoRecord ? '1' : '0'
//        let record = '1'
        return this.screenShareUrl + '/?type=new&customerName=' + this.$store.state.webchat.shareScreenCustName + '&record=' + record + '&path=' + screenShareRecordPath
      },
      sessionId () {
        return this.$store.state.webchat.shareScreenSessionid
      }
    },
    methods: {
      getMsgFromChildFrame (b) {
        if (typeof b.data === 'string' && b.data.indexOf('roomCreated') !== -1) {
          let createObj = JSON.parse(b.data.substring('roomCreated'.length))
          let msg = {
            _id: this.sessionId,
            roomId: createObj.roomid,
            filename: createObj.filename,
            path: screenShareRecordPath,
            record: this.videoRecord
          }
          this.$store.dispatch('creatShareScreen', msg)
        }
        if (typeof b.data === 'string' && b.data.indexOf('ShareEnd') !== -1) {
          let finishobj = JSON.parse(b.data.substring('ShareEnd'.length))
          let finishmsg = {
            _id: this.sessionId,
            duration: finishobj.duration,
            filename: finishobj.filename,
            path: screenShareRecordPath,
            operation: 'finish'
          }
          this.$store.dispatch('finishShareScreen', finishmsg)
          let msg = {
            status: false,
            id: '',
            name: ''
          }
          this.$store.commit(types.SET_SHARESCREEN, msg)
        }
        if (b.data === 'ShareCancel') {
          let finishmsg = {
            _id: this.sessionId,
            operation: 'cancel'
          }
          this.$store.dispatch('finishShareScreen', finishmsg)
          let msg = {
            status: false,
            id: '',
            name: ''
          }
          this.$store.commit(types.SET_SHARESCREEN, msg)
        }
        if (b.data === 'ShareCancelChoose') {
          let msg = {
            status: false,
            id: '',
            name: ''
          }
          this.$store.dispatch('changeStatusBeforeShare', {_id: this.sessionId, operation: 'cancel'})
          this.$store.commit(types.SET_SHARESCREEN, msg)
        }
        if (b.data === 'newJoin') {
          this.$message.success(this.$t('screenShare.newJoin'))
        }
        if (b.data === 'custLeave') {
          this.$message.warn(this.$t('screenShare.custLeave'))
        }
      },
      smallMode () {
        this.windowMode = 'min'
      },
      maxMode () {
        let iframe = document.getElementById('shareScreenVideo').getElementsByTagName('iframe')[0].contentWindow
        let Video = document.getElementById('shareScreenVideo')
        Video.style.left = '0'
        Video.style.top = '0'
        Video.style.width = window.innerWidth + 'px'
        Video.style.height = window.innerHeight + 'px'
        iframe.postMessage('maxMode', '*')
        this.windowMode = 'max'
      },
      bigMode () {
        let iframe = document.getElementById('shareScreenVideo').getElementsByTagName('iframe')[0].contentWindow
        let Video = document.getElementById('shareScreenVideo')
        Video.style.left = '28%'
        Video.style.top = '20%'
        Video.style.width = '700px'
        Video.style.height = '400px'
        iframe.postMessage('bigMode', '*')
        this.windowMode = 'big'
      },
      closeVideo () {
        let iframe = document.getElementById('shareScreenVideo').getElementsByTagName('iframe')[0].contentWindow
        let Video = document.getElementById('shareScreenVideo')
        if (this.windowMode === 'min') {
          Video.style.left = '28%'
          Video.style.top = '20%'
          Video.style.width = '700px'
          Video.style.height = '400px'
          this.windowMode = 'big'
        }
        iframe.postMessage('wantClose', '*')
      },
      getCss (o, key) {
        return o[key]
      },
      startDrag (bar, target, self, callback) {
        bar.onmousedown = function (event) {
          console.log(self.getCss(target, 'offsetLeft'))
          event.preventDefault()
          if (self.getCss(target, 'offsetLeft') !== 'auto') {
            self.params.left = self.getCss(target, 'offsetLeft')
          }
          if (self.getCss(target, 'offsetTop') !== 'auto') {
            self.params.top = self.getCss(target, 'offsetTop')
          }
          self.params.flag = true
          if (!event) {
            event = window.event
            bar.onselectstart = function () {
              return false
            }
          }
          let e = event
          self.params.currentX = e.clientX
          self.params.currentY = e.clientY < 0 ? 0 : e.clientY
        }
        target.onmouseup = function () {
          self.params.flag = false
          if (self.getCss(target, 'offsetLeft') !== 'auto') {
            self.params.left = self.getCss(target, 'offsetLeft')
          }
          if (self.getCss(target, 'offsetTop') !== 'auto') {
            self.params.top = self.getCss(target, 'offsetTop')
          }
        }
        target.onmousemove = function (event) {
          let e = window.event
          let nowX = e.clientX
          let nowY = e.clientY
          let disX = 0
          let disY = 0
          if (self.params.flag) {
            disX = nowX - self.params.currentX
            disY = nowY - self.params.currentY
            // 判断上下左右的极限位置
            let limitLeft = (parseInt(self.params.left) + disX) > (tWidth - 50) ? (tWidth - 50) : (parseInt(self.params.left) + disX) < (100 - self.dragWidth) ? 100 - self.dragWidth : parseInt(self.params.left) + disX
            let limitTop = (parseInt(self.params.top) + disY) > (tHeight - 34) ? (tHeight - 34) : (parseInt(self.params.top) + disY) < 0 ? 0 : parseInt(self.params.top) + disY
            target.style.left = limitLeft + 'px'
            target.style.top = limitTop + 'px'
          }
          if (typeof callback === 'function') {
            callback(parseInt(self.params.left) + disX, parseInt(self.params.top) + disY)
          }
        }
      },
      dragBarOver (self) {
        let oContent = document.getElementById('shareScreenVideo')
        oContent.onmouseover = function () {
          self.dragbarShow = true
        }
        oContent.onmouseout = function () {
          self.dragbarShow = false
        }
      }
    },
    mounted () {
      let oContent = document.getElementById('shareScreenVideo')
      let oBar = document.getElementById('dragbar')
      let minvideo = document.getElementById('minvideo')
      this.dragBarOver(this)
      this.startDrag(oBar, oContent, this)
      this.startDrag(minvideo, minvideo, this)
      this.dragWidth = oContent.clientWidth
      this.dragHeight = oContent.clientHeight
      tWidth = document.body.clientWidth
      tHeight = document.body.clientHeight
      if (window.addEventListener) {
        window.addEventListener('message', this.getMsgFromChildFrame)
      } else {
        window.attachEvent('onmessage', this.getMsgFromChildFrame)
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'screenShareUrl'}).then((screenShareUrl) => {
        this.screenShareUrl = screenShareUrl
      })
      this.$store.dispatch('getCache', {type: 'channelGlobalSet'}).then((channelGlobalSet) => {
        if (channelGlobalSet.shareScreenRecord === '1') {
          this.videoRecord = true
        } else {
          this.videoRecord = false
        }
      })
    },
    beforeDestroy () {
      window.removeEventListener('message', this.getMsgFromChildFrame)
    }
  })
</script>
<style lang='stylus' scoped type="text/stylus">
  @import "./../../../assets/common.styl"
  .video
    position: absolute;
    left: 28%;
    top: 20%;
    width: 700px;
    height: 400px;
    z-index: 30000;
    overflow: hidden;
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0 0 3px 2px rgba(53, 53, 53, 0.1);
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-style: solid solid none;
    border-top-color: #19CAA6;
    border-right-color: #19CAA6;
    border-left-color: #19CAA6;
    .closeColor
      color: $cf-gray0
    .dragbar
      width: 100%;
      height: 50px;
      /*opacity: 0.5;*/
      position: absolute;
      /*background-color: #ffffff;*/
      cursor: move;
    .headerimg
      position: absolute;
      right: 2%;
      top: 0;
      height 60px
      text-align: center;
    .headerimg:after
      content: '';
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
    .minimg
      display inline-block
      vertical-align middle
      width: 26px;
      height: 26px;
      margin-right 5px
      background-color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      i
        width: 20px;
        vertical-align: middle;
    .minimg:after
      content: '';
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;

  .minvideo
    position: absolute
    z-index 100
    cursor pointer
    width 80px
    height 80px
    right 1%
    top 20%
    text-align center
    background-color $c-main
    img
      width: 20px;
      vertical-align: middle;
    .close
      position: absolute
      left -10px
      top -10px
      width 20px
      height 20px
      border-radius 50%
      text-align center
      vertical-align middle
      border 1px $cf-level5 solid
      background $c-back
      color $cf-level1
      i
        font-size 14px
        vertical-align middle
  .minvideo:after
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;

</style>
